<template>
  <el-tabs type="border-card">
    <el-tab-pane label="用户信息">
      <SearchAdd @send-data="search"></SearchAdd>
      <el-scrollbar :height="sc_height">
        <el-table
          row-key="date"
          ref="filterTable,multipleTable"
          tooltip-effect="dark"
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column prop="id" label="ID" :width="tableWidth"> </el-table-column>
          <el-table-column prop="nickname" label="昵称" :width="tableWidth"> </el-table-column>
          <el-table-column prop="sex" label="性别" :width="tableWidth" :formatter="formatter"> </el-table-column>
          <el-table-column prop="mobile" label="手机号码" :width="tableWidth"> </el-table-column>
          <el-table-column
            prop="createTime"
            label="注册日期"
            sortable
            :width="tableWidth"
            column-key="createTime"
            :filters="dataObj"
            :filter-method="filterHandler"
          >
          </el-table-column>
        </el-table>
      </el-scrollbar> 
      <!-- 分页条 -->
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import SearchAdd from '@/components/SearchAdd.vue';
import {getAllusers} from '@/api/secondary_page/user_manage'
export default{
    name:"PageUserManage",
     data() {
      return {
        sc_height: '800px',
        tableWidth:'(calc(100% - 220))/5',
        dataObj:[],
        tableData: [],
        user:{
          id:0,
          nickname:'',
          sex:'',
          mobile:'',
          createTime:''
        }
      }
    },
    methods:{
      //获取用户
      getUsers(){
        getAllusers(this.user).then(
          response=>{
            this.tableData = response
            console.log(this.tableData)
            for(var i=0;i<this.tableData.length;i++){
              var date = this.tableData[i].createTime
              this.dataObj.push({text:date,value:date})
            }
          }
        )
        
      },
      filterHandler(value, row, column) {
        const property = column['property']
        return row[property] === value
      },
      formatter(row){
        if(row.sex){
          return '男'
        }else{
          return '女'
        }
      },
      //搜索函数
      search(input,type,o){
        // console.log(input+'----'+type+'----'+o)
        if(o){
          this.user = {}
          if(isNaN(input)){
            this.user.nickname = input
          }else{
            this.user.mobile = input
          }
          this.getUsers()
        }
      },
    },
    mounted(){
      this.user = {}
      this.user.flag = 0
      this.getUsers()
      this.sc_height = (window.screen.availHeight - 250) + 'px'
      window.onresize = function () { 
        // console.log(window.innerHeight)
        this.sc_height = (window.innerHeight - 250) + 'px' 
      }
    },
    components:{
      SearchAdd
    }
}
</script>

<style scoped>
.pageCon{
  float: right;
  margin-top: 20px;
}
</style>